import React, {useState} from 'react';
import Form from '../components/Form';

import "./assets/canvas.css";

export default {
  title: '5 - Form',
  component: Form,
	decorators: [
		(Story) => (
			<div className="canvas">
				<Story/>
			</div>
		),
	],
	argTypes: {
    color: {options: ['red', 'blue', 'yellow', 'orange', 'purple', 'cyan', 'base03']},
    type: {options: ['text', 'password', 'number']}
	},
}

const states = {
  BASIC: {
    header: 'Basic Information',
    schema: {
      name: {type: 'text', defaultValue:'Yue Marvin Tao'},
      gender: {type: 'select', defaultValue: 'male', suggs:['male', 'female', 'former male', 'former female']},
      district: {type: 'select', defaultValue: 'Beijing', suggs:[...Array(15)].map(e => Math.random().toString(36).slice(2, 10))},
      age: {type: 'number', defaultValue: 23},
      phone: {
        type: 'text',
        valids: [
          {
            validator: (val) => val.match(/^\d{11}$/),
            type: 'dead',
            message: 'Not a valid Chinese phone number'
          }
        ]
      },
      pass: {
        type: 'text',
        valids: [
        ]
      }
    },
    layout: [
      {row: ['name', 'gender']},
      {row: ['district', 'age']}
    ],
    transRules: {
      OPTIONAL: {
        desc: 'Next step'
      }
    }
  },
  OPTIONAL: {
    header: 'Extra Information',
    schema: {
      company: {type: 'text', defaultValue:'Yue Marvin Tao'},
      industry: {type: 'select', defaultValue: 'Beijing', suggs:[...Array(15)].map(e => Math.random().toString(36).slice(2, 10))},
    }
  }
}

export const Default = () => {

  const [formState, setFormState] = useState('BASIC');

  const onTrans = (nextState) => {
    console.log('ON TRANS', nextState);
    setFormState(nextState);
  };

  const style = {
    width: 400
  }

  return <Form {...{state:states[formState], onTrans, style}} />;
}

export const WithData = () => {

  const [formState, setFormState] = useState('BASIC');

  const onTrans = (nextState, data) => {
    console.log('ON TRANS', nextState);
    setFormState(nextState);
  };

  const onDone = (nextState, data) => {
    console.log(data);
  }

  const data = {
    name: 'Marvin',
    gender: 'unknown',
    district: 'unknown',
    age: 12345
  }

  const style = {
    width: 400
  }

  return <Form {...{state:states[formState], data, onTrans, onDone, style}} />;
}